import React, { useState } from 'react';
import { Card, Row, Col, Table, Button } from 'antd';
import { UserOutlined, ShoppingCartOutlined, DollarOutlined, TeamOutlined } from '@ant-design/icons';
import LineChart from './LineChart';
import BarChart from './BarChart';
import CurveChart from './CurveChart';
import styles from './Home.module.css';

const data = [
  { title: '店铺总量 (个)', count: 2000, color: styles.red, icon: <UserOutlined /> },
  { title: '订单总量 (单)', count: 2000, color: styles.orange, icon: <ShoppingCartOutlined /> },
  { title: '成交额 (元)', count: 2000, color: styles.blue, icon: <DollarOutlined /> },
  { title: '员工数量 (人)', count: 2000, color: styles.green, icon: <TeamOutlined /> },
];

const initialRankingData = [
  { key: '1', rank: 1, name: '店铺1', orders: 2000, amount: 10000 },
  { key: '2', rank: 2, name: '店铺2', orders: 1500, amount: 8000 },
  { key: '3', rank: 3, name: '店铺3', orders: 1000, amount: 5000 },
  { key: '4', rank: 4, name: '店铺4', orders: 500, amount: 30000 },
  { key: '5', rank: 5, name: '店铺5', orders: 300, amount: 1000 },
];

const columns = [
  { title: '排名', dataIndex: 'rank', key: 'rank' },
  { title: '名称', dataIndex: 'name', key: 'name' },
  { title: '订单数量', dataIndex: 'orders', key: 'orders' },
  { title: '订单金额', dataIndex: 'amount', key: 'amount', render: (text) => `${text}元` },
];

export default function Home() {
  const [rankingData, setRankingData] = useState(initialRankingData);
  const [activeButton, setActiveButton] = useState('orders');

  const sortData = (key) => {
    const sortedData = [...rankingData]
      .sort((a, b) => b[key] - a[key])
      .map((item, index) => ({ ...item, rank: index + 1 }));
    setRankingData(sortedData);
    setActiveButton(key);
  };

  return (
    <div>
      <Row gutter={16}>
        {data.map((item, index) => (
          <Col span={6} key={index}>
            <Card className={item.color} bordered={false}>
              <div className={styles.cardContent}>
                <div className={styles.titleRow}>
                  <div className={styles.icon}>{item.icon}</div>
                  <h3>{item.title}</h3>
                </div>
                <p>{item.count}</p>
              </div>
            </Card>
          </Col>
        ))}
      </Row>
      <Row gutter={16} style={{ marginTop: '20px' }}>
        <Col span={12}>
          <Card bordered={false}>
            <LineChart />
          </Card>
        </Col>
        <Col span={12}>
          <Card bordered={false}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <h3 style={{ marginRight: '440px' }}>成交额排名</h3>
              <div>
                <Button
                  type={activeButton === 'orders' ? 'primary' : 'default'}
                  onClick={() => sortData('orders')}
                  style={{ borderRadius: '0' }}
                >
                  订单数量
                </Button>
                <Button
                  type={activeButton === 'amount' ? 'primary' : 'default'}
                  onClick={() => sortData('amount')}
                  style={{ borderRadius: '0' }}
                >
                  成交金额
                </Button>
              </div>
            </div>
            <Table columns={columns} dataSource={rankingData} pagination={false} />
          </Card>
        </Col>
      </Row>
      <Row gutter={16} style={{ marginTop: '20px' }}>
        <Col span={12}>
          <Card bordered={false}>
            <BarChart />
          </Card>
        </Col>
        <Col span={12}>
          <Card bordered={false}>
            <CurveChart />
          </Card>
        </Col>
      </Row>
    </div>
  );
}
